<template>
    <main class="home" aria-labelledby="main-title">
        <header class="hero">
            <img v-if="data.heroImage" :src="$withBase(data.heroImage)" :alt="data.heroAlt || 'hero'">

            <!--<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>-->
            <h1 id="main-title" @mouseover="titleShow=false" @mouseleave="titleShow=true">
                <span>E</span><transition name="title-fade"><em v-if="titleShow">veryone</em></transition>
                <span>E</span><transition name="title-fade"><em v-if="titleShow">asy</em></transition>
                <span>U</span><transition name="title-fade"><em v-if="titleShow">ser</em></transition>
                <span>I</span><transition name="title-fade"><em v-if="titleShow">nterface</em></transition>
            </h1>

            <p class="description">{{ data.tagline || $description || 'Welcome to your VuePress site' }}</p>
            <p class="action" v-if="data.actionText && data.actionLink"><NavLink class="action-button" :item="actionLink"/></p>
        </header>

        <div class="features" v-if="data.features && data.features.length">
            <div class="feature" v-for="(feature, index) in data.features" :key="index">
                <h2>{{ feature.title }}</h2>
                <p>{{ feature.details }}</p>
            </div>
        </div>

        <Content class="custom"/>

        <div class="footer" v-if="data.footer">
            {{ data.footer }}
        </div>
    </main>
</template>

<script>
    import NavLink from '@theme/components/NavLink.vue'

    export default {
        components: {NavLink},

        computed: {
            data() {
                return this.$page.frontmatter
            },

            actionLink() {
                return {
                    link: this.data.actionLink,
                    text: this.data.actionText
                }
            }
        },

        data() {
            return {
                titleShow: true
            }
        }
    }
</script>

<style lang="stylus">
    .home
        padding $navbarHeight 2rem 0
        max-width 960px
        margin 0px auto
        display block

        .hero
            text-align center

            img
                max-width: 100%
                max-height 280px
                display block
                margin 3rem auto 1.5rem


            h1
                font-size 2.3rem
                color #4e6e8e
                font-weight normal

                span
                    color: $accentColor !important;
                    display inline-block

                em
                    opacity 0.8
                    font-style normal
                    display inline-block

                .title-fade-enter-active, .title-fade-leave-active
                    transition opacity 1s

                .title-fade-enter, .title-fade-leave-to
                    opacity 0

            h1, .description, .action
                margin 1.8rem auto

            .description
                max-width 35rem
                font-size 1.2rem
                line-height 1.3
                color lighten($textColor, 40%)

            .action-button
                display inline-block
                font-size 1.2rem
                color #fff
                background-color $accentColor
                padding 0.8rem 1.8rem
                border-radius 4px
                transition background-color .1s ease
                box-sizing border-box
                border-bottom 1px solid darken($accentColor, 10%)

                &:hover
                    background-color lighten($accentColor, 10%)

        .features
            border-top 1px solid $borderColor
            padding 1.2rem 0
            margin-top 2.5rem
            display flex
            flex-wrap wrap
            align-items flex-start
            align-content stretch
            justify-content space-between

        .feature
            flex-grow 1
            flex-basis 30%
            max-width 30%

            h2
                font-size 1.2rem
                font-weight 500
                border-bottom none
                padding-bottom 0
                color lighten($textColor, 10%)

            p
                color lighten($textColor, 25%)

        .footer
            padding 2.5rem
            border-top 1px solid $borderColor
            text-align center
            color lighten($textColor, 25%)

    @media (max-width: $MQMobile)
        .home
            .features
                flex-direction column

            .feature
                max-width 100%
                padding 0 2.5rem

    @media (max-width: $MQMobileNarrow)
        .home
            padding-left 1.5rem
            padding-right 1.5rem

            .hero
                img
                    max-height 210px
                    margin 2rem auto 1.2rem

                h1
                    font-size 2rem

                h1, .description, .action
                    margin 1.2rem auto

                .description
                    font-size 1.2rem

                .action-button
                    font-size 1rem
                    padding 0.6rem 1.2rem

            .feature
                h2
                    font-size 1.25rem
</style>
